<script setup>
// 引入vue3数据
import { ref, computed, watch } from 'vue'
// 引入路由
import { useRoute, useRouter } from 'vue-router'
//构建路由方法对象
const router = useRouter()
// 构建路由参数对象
const route = useRoute()

// 引入Vant轻提示
import { showToast } from 'vant'
import { showConfirmDialog } from 'vant'

// 引入pinia数据
import { storeToRefs } from 'pinia'
import { FilmDataObj } from '@/stores/LXZ.ts'

// 获取pinia实例内容
const Ordersdata = FilmDataObj()

// 获取pinia数据使用这种方式
const { FilmImg, CurrentOrders, OrdersArray } = storeToRefs(Ordersdata)
console.log('初始化', CurrentOrders)

const { addOrdersArray } = Ordersdata

// 倒计时
const time = CurrentOrders.value.PlaceAnOrderTime + 900000 - Date.now()
// console.log();

// 小吃数据
let Snackdata = ref([
  {
    id: 1,
    name: '32oz爆米花1桶+16oz可乐1杯(1选1)',
    price: 29,
    num: 0,
    tag: '双人',
    img: 'https://img.meituan.net/maoyaneticketimage/4258f048a69cad039c637a05d9d426bb186892.png@750w_750h_2e',
  },
  {
    id: 2,
    name: '42oz爆米花1桶+16oz可乐1杯(1选1)',
    price: 39,
    num: 0,
    tag: '双人',
    img: 'https://img.meituan.net/maoyaneticketimage/4258f048a69cad039c637a05d9d426bb186892.png@750w_750h_2e',
  },
  {
    id: 3,
    name: '52oz爆米花1桶+16oz可乐1杯(1选1)',
    price: 49,
    num: 0,
    tag: '双人',
    img: 'https://img.meituan.net/maoyaneticketimage/4258f048a69cad039c637a05d9d426bb186892.png@750w_750h_2e',
  },
  {
    id: 4,
    name: '62oz爆米花1桶+16oz可乐1杯(1选1)',
    price: 59,
    num: 0,
    tag: '双人',
    img: 'https://img.meituan.net/maoyaneticketimage/4258f048a69cad039c637a05d9d426bb186892.png@750w_750h_2e',
  },
  {
    id: 5,
    name: '72oz爆米花1桶+16oz可乐1杯(1选1)',
    price: 69,
    num: 0,
    tag: '双人',
    img: 'https://img.meituan.net/maoyaneticketimage/4258f048a69cad039c637a05d9d426bb186892.png@750w_750h_2e',
  },
  {
    id: 6,
    name: '82oz爆米花1桶+16oz可乐1杯(1选1)',
    price: 79,
    num: 0,
    tag: '双人',
    img: 'https://img.meituan.net/maoyaneticketimage/4258f048a69cad039c637a05d9d426bb186892.png@750w_750h_2e',
  },
  {
    id: 7,
    name: '92oz爆米花1桶+16oz可乐1杯(1选1)',
    price: 89,
    num: 0,
    tag: '双人',
    img: 'https://img.meituan.net/maoyaneticketimage/4258f048a69cad039c637a05d9d426bb186892.png@750w_750h_2e',
  },
])
// 计算小吃价格
let priceAll = computed(() => {
  return Snackdata.value.reduce((acc, cur) => acc + cur.price * cur.num, 0)
})

// 计算选中小吃
let SnackNum = computed(() => {
  return Snackdata.value.filter((item) => item.num >= 1)
})

// 切换显示状态
let Footshow = ref(false)
let Foottext = ref('查看全部7个套餐')

// 弹出明细
function FootShow() {
  Footshow.value = !Footshow.value
  if (Footshow.value) {
    Foottext.value = '收起'
  } else {
    Foottext.value = '查看全部7个套餐'
  }
}
let MXshow = ref(false)

// 加入订单

function YesAddOrders() {
  console.log('支付成功')

  showToast('支付成功')
  addOrdersArray({
    ...CurrentOrders.value,
    FootArr: SnackNum.value,
    isPay: true,
    Allprice: priceAll.value + CurrentOrders.value.price,
  })

  console.log(OrdersArray.value)
  router.replace({ name: 'completedorder', query: { Tip: '支付成功' } })
}
// 返回自动加入订单

function NoAddOrders() {
  showConfirmDialog({
    title: '返回',
    message: '订单尚未支付，稍后可在我的订单中查看',
  })
    .then(() => {
      // on confirm
      showToast('已经加入待支付订单')
      addOrdersArray({
        ...CurrentOrders.value,
        FootArr: SnackNum.value,
        isPay: false,
        Allprice: priceAll.value + CurrentOrders.value.price,
      })

      console.log(OrdersArray.value)
      router.back()
    })
    .catch(() => {
      // on cancel
    })
}

// 弹起支付页
let payShow = ref(false)
const payClick = () => {
  payShow.value = !payShow.value
}

// 支付密码
let PAWvalue = ref('')

watch(PAWvalue, (newV) => {
  if (newV.length >= 6) {
    YesAddOrders()
  }
})
</script>






<template>
  <div class="Orders-box">
    <!-- 顶部栏 -->
    <van-nav-bar title="支付订单" @click-left="NoAddOrders">
      <template #right>
        <div class="times">
          <van-icon name="clock-o" size="20rem" color="#fff" style="padding-right: 4rem" />
          <van-count-down :time="time" format="mm: ss" />
        </div>
      </template>
      <template #left>
        <van-icon name="arrow-left" size="28rem" color="#fff" />
      </template>
    </van-nav-bar>
    <!-- 详情头 -->

    <div class="content">
      <van-image :src="FilmImg" style="width: 70rem; height: 100rem; margin-right: 10rem" />

      <div class="info-box">
        <div class="title">
          <div class="ti1">{{ CurrentOrders.name }}</div>
          <div class="titprice">
            {{ CurrentOrders.price / 38 }}张 原价￥{{ CurrentOrders.price }}.0
          </div>
        </div>
        <div class="date">
          {{ CurrentOrders.dateinfo }}
        </div>

        <div class="lobby">
          {{ CurrentOrders.CMname }}
        </div>

        <div class="info">
          <span>{{ CurrentOrders.lobbySeats }}</span>
          <span v-for="item in CurrentOrders.Seat" :key="item"> {{ item }} &nbsp;</span>
        </div>
      </div>
    </div>
    <!-- 退票信息 -->
    <div class="returnATicket">
      <div>
        <span class="icon"><van-icon name="success" color="#fff" /></span>
        支持退票
        <span class="icon"><van-icon name="success" color="#fff" /></span>
        支持改签
      </div>
      <div>退改签须知<van-icon name="arrow" /></div>
    </div>

    <!-- 详情 -->
    <div class="detail">
      <div>
        <span>影票活动与优惠券</span>
        <span style="color: #afafaf">无可用<van-icon name="arrow" /></span>
      </div>
      <div class="so-price">
        票价小计 <span style="font-size: 13rem; color: #f0526d">￥</span
        ><span style="font-size: 22rem; color: #f0526d">{{ CurrentOrders.price }}.0</span>
      </div>
    </div>
    <!-- 间隔 -->
    <div style="width: 100vw; height: 10rem; background-color: #f5f5f9"></div>

    <div class="YingCheng-Vip">
      <div class="title">
        <div>影城卡</div>
        <div class="desc">开卡享优惠，数量有限，先到先得~</div>
      </div>
      <!-- Vip -->
      <div class="Vip">
        <div class="Vip-box">
          <div class="TuiJian">推荐</div>

          <div class="Vip-itemL">
            <div>DY影城会员卡</div>
            <div class="f-s">
              开通后<span style="color: #ff9e05">本单立减9元<van-icon name="arrow" /></span>
            </div>
          </div>
          <div class="Vip-itemR">
            <span>￥9.9/季度</span>
            <span class="icon"><van-icon name="success" color="#fff" /></span>
          </div>
        </div>
      </div>
    </div>
    <!-- 观影标配文字 -->
    <div class="GuanYing-text">
      <div class="GY-box">
        <div class="title">观影标配</div>
        <div class="desc">客官,爆米花跟电影更配哦~</div>
      </div>
    </div>

    <!-- 食品套餐 -->
    <div class="Foot-box">
      <div>
        <div
          class="Foot-Card"
          v-for="(item, index) of Snackdata"
          :key="item.id"
          v-show="Footshow || index < 3"
        >
          <van-image :src="item.img" width="95rem" height="95rem" />

          <div class="Card-right">
            <div class="title"><span></span> {{ item.name }}</div>

            <div class="price-num">
              <div style="color: red">
                ￥{{ item.price }}
                <span style="font-size: 12rem; text-decoration: line-through; color: #afafaf"
                  >￥{{ item.price + 16 }}</span
                >
              </div>

              <van-stepper
                v-model="item.num"
                min="0"
                theme="round"
                button-size="22"
                disable-input
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 小结 -->
    <div class="btn-text">
      <div class="btn-All" @click="FootShow">{{ Foottext }}</div>
      <div class="Top">
        <span>抵用卷</span>
        <span>无可用<van-icon name="arrow" color="#afafaf" /></span>
      </div>

      <div class="price-Foot">
        <span>小吃小计</span>

        <span style="color: #f0526d; font-size: 22rem; margin-left: 20rem"
          ><span style="font-size: 13rem">￥</span>{{ priceAll }}.0</span
        >
      </div>
    </div>
    <!-- 间隔 -->
    <div style="width: 100vw; height: 10rem; background-color: #f5f5f9"></div>

    <!-- 用户信息 -->
    <div class="user-info">
      <div class="CellPhone">
        <div class="title">
          <span style="margin-right: 15rem">手机号</span><span>136****0012</span>
        </div>
        <div class="desc">手机号仅用于生成订单，取票码不再以短信发送</div>
      </div>
    </div>
    <!-- 间隔 -->
    <div style="width: 100vw; height: 75rem; background-color: #f5f5f9"></div>

    <!-- 底部结算栏 -->
    <div class="bottom-bar">
      <div style="color: red">
        ￥<span class="price">{{ priceAll + CurrentOrders.price }}.0</span>
      </div>

      <div class="btn-box">
        <div class="text" @click="MXshow = !MXshow">
          明细<van-icon name="arrow-down" v-show="MXshow" /><van-icon
            name="arrow-up"
            v-show="!MXshow"
          />
        </div>

        <van-button type="warning" style="width: 38vw; background-color: #ff9e05" @click="payClick"
          >确认支付</van-button
        >
      </div>
    </div>

    <!-- 弹出层 -->
    <van-popup
      v-model:show="MXshow"
      round
      position="bottom"
      :style="{ height: '60%' }"
      class="show-pop"
    >
      <div class="title-T">小吃小计</div>
      <van-empty
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="暂时未选购小吃哦,快去选购吧!"
        v-if="!SnackNum.length"
      />
      <div class="Foot-box">
        <div>
          <div class="Foot-Card" v-for="item of SnackNum" :key="item.id">
            <van-image :src="item.img" width="95rem" height="95rem" />

            <div class="Card-right">
              <div class="title"><span></span> {{ item.name }}</div>

              <div class="price-num">
                <div style="color: red">
                  ￥{{ item.price }}
                  <span style="font-size: 12rem; text-decoration: line-through; color: #afafaf"
                    >￥{{ item.price + 16 }}</span
                  >
                </div>

                <van-stepper
                  v-model="item.num"
                  min="0"
                  theme="round"
                  button-size="22"
                  disable-input
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 支付密码弹出层 -->
    <van-popup
      v-model:show="payShow"
      round
      position="bottom"
      :style="{ height: '400rem' }"
      class="PAWshow"
    >
      <div class="title">请输入支付密码</div>
      <van-password-input
        :value="PAWvalue"
        :focused="payShow"
        @focus="payShow = true"
        style="padding-top: 40rem"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard v-model="PAWvalue" :show="payShow" @blur="payShow = false" />
    </van-popup>
  </div>
</template>







<style lang="less" scoped>
// 大盒样式
// .Orders-box{
//     background-color: #f5f5f9;
// }

//修改vant顶部栏样式
:deep(.van-nav-bar__content) {
  background-color: #84aec4;
  border: none;
  margin: 0;
}
:deep(.van-nav-bar__title) {
  color: white;
  font-weight: normal;
}
:deep(.van-count-down) {
  color: white;
  font-size: 14rem;
}
.times {
  background-color: #ffffff50;
  display: flex;
  align-items: center;

  transform: translateX(16rem);
  border-radius: 15rem 0 0 15rem;
  padding: 3rem 5rem;
}

// 详情头
.content {
  width: 100vw;
  height: 145rem;
  background-color: #84aec4;
  padding: 15rem;
  padding-top: 0;
  box-sizing: border-box;
  display: flex;

  .info-box {
    width: 70vw;
    color: white;
    font-size: 14rem;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 5rem;
      .ti1 {
        width: 35vw;
        font-size: 20rem;
        font-weight: 700;

        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出的文本 */
        text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
      }
      .titpeice {
      }
    }
    .date {
      margin-bottom: 5rem;
      font-weight: 700;
    }
    .lobby {
      margin-bottom: 5rem;
    }
  }
}
// 退票信息
.returnATicket {
  margin-top: -15rem;
  border-radius: 15rem 15rem 0 0;
  height: 60rem;
  background-color: #6a8d9e;
  padding: 0 10rem;
  padding-bottom: 13rem;
  box-sizing: border-box;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14rem;
  .icon {
    background-color: #5ccf89;
    padding: 1rem 2rem;
    border-radius: 10rem;
  }
}
// 详情
.detail {
  margin-top: -15rem;
  border-radius: 15rem 15rem 0 0;
  height: 90rem;
  background-color: white;
  padding: 10rem;
  display: flex;
  flex-flow: column;
  box-sizing: border-box;

  div {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .so-price {
    justify-content: flex-end;
    border-top: 1px solid #cccccc67;
    // align-items: flex-end;
  }
}

// 影城卡
.YingCheng-Vip {
  width: 100vw;
  height: 125rem;
  //   background-color: #5ccf89;
  padding: 10rem;
  box-sizing: border-box;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rem;
    .desc {
      font-size: 12rem;
      color: #999999;
    }
  }

  .Vip {
    overflow: hidden;
  }
  .Vip-box {
    width: 100%;
    height: 70rem;
    background-color: #fff3e8;
    border-radius: 8rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 13rem;
    box-sizing: border-box;
    align-items: center;
    color: #572c23;

    .TuiJian {
      color: #572c23;
      font-size: 10rem;
      position: absolute;
      padding: 1rem 12rem;
      top: 2rem;
      left: -12rem;
      transform: rotate(-45deg);
      background-color: #e7ba92;
    }
    .icon {
      background-color: #dfc7b1;
      padding: 1rem 2rem;
      border-radius: 10rem;
      margin-left: 10rem;
      font-size: 14rem;
    }

    .f-s {
      font-size: 12rem;
    }
  }
}

// 观影标配
.GuanYing-text {
  padding: 0 10rem;
  .GY-box {
    display: flex;
    justify-content: space-between;
    padding: 10rem 0;
    border-top: 1px solid #cccccc67;
    border-bottom: 1px solid #cccccc67;
    .title {
      font-size: 15rem;
    }
    .desc {
      font-size: 11rem;
      color: #999999;
    }
  }
}

// 食品套餐
.Foot-Card {
  border-bottom: 1px solid #cccccc4b;
  display: flex;
  padding: 10rem;
  .Card-right {
    margin-left: 15rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    width: 60vw;
  }
  .price-num {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

// 小结
.btn-text {
  padding: 10rem;
  .btn-All {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10rem;
    color: rgb(253, 59, 59);
    border-bottom: 1px solid #cccccc4b;
    font-size: 14rem;
  }
  .Top {
    padding: 10rem 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #cccccc4b;
  }
  .price-Foot {
    padding: 15rem 0;
    display: flex;
    // flex-flow: column;
    justify-content: flex-end;
    align-items: flex-end;
  }
}

// 用户信息
.user-info {
  padding: 10rem;
  .CellPhone {
    .title {
      padding: 10rem 0;
      padding-bottom: 15rem;
      border-bottom: 1px solid #cccccc4b;
    }
    .desc {
      font-size: 12rem;
      color: #999999;
      padding: 8rem 0;
    }
  }
}

// 底部结算栏
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background-color: white;
  box-sizing: border-box;
  padding: 10rem 20rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .price {
    font-size: 26rem;
  }
  .btn-box {
    width: 52vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text {
      font-size: 14rem;
      color: #afafaf;
    }
  }
}

// 弹出层样式
.show-pop {
  .title-T {
    padding: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #afafaf;
    position: sticky;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 20;
  }
}
// 输入密码弹出样式
.PAWshow {
  .title {
    padding: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #afafaf;
    position: sticky;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 20;
  }
}

// 步进器样式
:deep(.van-stepper__plus) {
  background-color: red;
}
// :deep(.van-stepper__minus){
//     border: 1px solid #afafaf;
// }
</style>